<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-下拉列表组件</title>
    <!--Vue必须放上面-->
    <script src="../js/vue.js"></script>
    <!--ElementUi-->
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <!--以前的下拉列表VS现在的下拉列表-->
        <select name="city" id="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">武汉</option>
            <option value="4">南京</option>
        </select>
        <hr>
        <!--
            下拉列表组件：el-select   行级组件
                el-option : 下拉列表中的选项
                   label: 指定了el-option中的标签内容
                   value : 就是值属性
        -->
        <el-select v-model="city">
            <el-option label="北京" value="1"></el-option>
            <el-option label="上海" value="2"></el-option>
            <el-option label="武汉" value="3"></el-option>
            <el-option label="南京" value="4"></el-option>
        </el-select>
        <el-select v-model="city">
            <el-option label="北京" value="1"></el-option>
            <el-option label="上海" value="2"></el-option>
            <el-option label="武汉" value="3"></el-option>
            <el-option label="南京" value="4"></el-option>
        </el-select>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                city:"1",
            },
            methods: {}
        });
    </script>
</body>
</html>